// 引入必要的模块
import Feature from "ol/Feature";
import { Point } from "ol/geom";
import VectorSource from "ol/source/Vector";
import { Vector as VectorLayer } from "ol/layer";
import { fromLonLat } from "ol/proj";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";
import OlMap from "ol/Map";
import Overlay from "ol/Overlay";

/**
 *  标记点管理类
 */

interface MarkerOptions {
    id: string;
    name: string; // 标记点名称
    image: string;
    coordinatess: [number, number];
    data: any; // 可选的数据属性，用于存储与标记点相关的额外信息
}

export default class OlMarker_Manager {
    private map: OlMap;
    private markerSource: VectorSource;
    private markerLayer: VectorLayer;
    private overlay: Overlay;
    private markes: Record<string, Feature<Point>> = {};
    private markerPoint = {
        Width: 2,
        Color: "white",
        fillColor: "#000",
        font: "14px Arial",
        backColor: "#ffffffb0",
    };

    constructor(map: OlMap) {
        this.map = map;

        // 创建Overlayer 用于显示查询结果
        // this.overlay = new Overlay({
        //     element: document.createElement('div'),
        //     positioning: "bottom-center",
        //     // offset: [-150, -150]
        // })
        // this.map.addOverlay(this.overlay)

        // 添加点击事件监听器
        // this.map.on('singleclick', this.handleMarkerClick.bind(this))
    }

    /**
     * 设置图层样式
     * @param vectorLayer vectorlayer
     */
    private layerStyle(vectorLayer: VectorLayer) {
        vectorLayer.setStyle((feature) => {
            const properties = feature.getProperties().properties;
            return new Style({
                image: new Icon({
                    src: properties.image as string,
                    width: 40,
                }),
                text: new Text({
                    text:
                        properties.data.status == 4
                            ? properties.name + " | 作业完毕"
                            : properties.data.status == 2 ? properties.name + " | 准备就绪" : (properties.name as string),
                    fill: new Fill({
                        color:
                            properties.data.status == 0 ? this.markerPoint.fillColor : "#FFF",
                    }),
                    font: this.markerPoint.font,
                    // stroke: new Stroke({ color: this.markerPoint.Color, width: this.markerPoint.Width }), //边框色
                    offsetY: 30, // 调整文本相对图标垂直位置
                    padding: [3, 3, 3, 5],
                    textAlign: "center",
                    backgroundFill: new Fill({
                        color: this.getColor(properties.data.status),
                    }),
                }),
            });
        });
    }

    /**
     * 添加标记点
     * @param options 标记点对象
     */
    public addMarker(options: MarkerOptions) {
        const { id, name, image, coordinatess, data } = options;
        // 创建标记点
        const markerFeatrue = new Feature({
            geometry: new Point(fromLonLat(coordinatess)),
            properties: {
                id,
                name,
                image,
                data, // data用于存储额外信息
            },
        });

        // 将标记点添加到图层和记录中
        this.markerSource.addFeature(markerFeatrue);
        this.markes[id] = markerFeatrue;
    }

    private getColor(state) {
        let color = "#FFF";
        switch (state) {
            case 0:
                color = "#FFF";
                break;
            case 1:
                color = "#5299ff";
                break;
            case 2:
                color = "#008000";
                break;
            case 3:
                color = "#550693";
                break;
            case 4:
                color = "#ff0000";
                break;
        }
        return color;
    }
    // 批量添加标记点
    public addMarkers(markers: MarkerOptions[]): VectorLayer {
        this.markerSource = new VectorSource();

        this.markerLayer = new VectorLayer({
            source: this.markerSource,
            zIndex: 4,
        });
        markers.forEach((marker) => this.addMarker(marker));
        // 设置图层样式
        this.layerStyle(this.markerLayer);
        return this.markerLayer;
    }

    /**
     * 删除标记点
     * @param id 标记点id
     */
    deleteMarker(id: string) {
        const marker = this.markes[id];
        if (marker) {
            this.markerSource.removeFeature(marker);
            delete this.markes[id];
        }
    }

    /**
     * 更新标记点
     * @param newMarkers 新的标记点数组
     */
    updateMarkers(newMarkers: MarkerOptions[]) {
        // 清除现有标记点
        this.markerSource.clear();
        this.markes = {};
        //添加新的标记点
        this.addMarkers(newMarkers);
    }

    // 单击事件处理
    // private handleMarkerClick(event: any) {
    //     const map = event.map;
    //     const features = map.getFeaturesAtPixel(event.pixel);
    //     if (features.length > 0) {
    //         const feature = features[0];
    //         const properties = feature.getProperties();
    //         const position = event.coordinate
    //         // 显示查询结果
    //         this.showOverlay(properties, position)
    //     } else {
    //         this.clearOverlay()
    //     }
    // }

    // private showOverlay(options: any, position) {
    //     this.overlay.getElement()!.innerHTML = `
    //      <div id="tech-tooltip" class="tech-tooltip">
    //      <div class="tech-tooltip-header">信息</div>
    //      <div class="tech-tooltip-content" id="tech-tooltip-content">
    //         <strong>${options.properties.name}（ID:${options.properties.id}）</strong>
    //         <br />
    //         ${options.properties.data ? JSON.stringify(options.properties.data) : 'no add data'}
    //      </div>
    //     </div>
    //     `;
    //     this.overlay.setPosition(position)
    // }

    // private clearOverlay() {
    //     this.overlay.getElement()!.innerHTML = ''
    // }
}
